<!--
 * @Author: your name
 * @Date: 2020-12-29 15:15:55
 * @LastEditTime: 2020-12-29 17:11:38
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \basiccss\background\bg1.html
-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景样式</title>
    <style>
        /*
            四种样式定义背景颜色
            red  #3498db rgb rgba
        */
        /* h2{
            background-color: red;
        } */
        /* h2{
            background-color: #3498db;
        } */
        /* h2{
            background-color: rgba(255,0, 0, 0.5);
        } */


        /*背景图片*/
        /* h2{
            background-image: url('load.jpg');
        } */


        /*背景裁切*/
        /* h2{
            background-image: url('load.jpg');
            border: 5px dashed #dddddd;
            background-clip: content-box;
        } */

        /*
            背景重复
            repeat 水平,垂直重复
            repeat-x 水平重复
            repeat-y 垂直重复
            no-repeat 不重复
            space 背景图片对称均匀分布
        */

/* 
        .dd{
            height: 1500px;
        } */

        /*
            background-attachment
            scroll 根据滚动条的滚动而滚动
            fixed  滚动条发生变化的时候,背景图片不变,但是要在当前div的高度范围内，固定不变，如果超出这个部分,那么将会发生改变
        */
        /* div{
            width: 300px;
            height: 500px;
            overflow: auto;
            border: 2px solid #cccccc;
            background-image: url(load.jpg);
            background-repeat: no-repeat;
            background-attachment: fixed;
        } */


        /*
           
            用于设置图片的水平,垂直定位
        */
        /* div{ */
            /* width: 500px; */
            /* height: 500px; */
            /* border: 2px solid #dddddd; */
            /* background-repeat: no-repeat; */

            /* 背景位置 */
            /* background-image: url(0.jpg); */
            /*居中对齐*/
            /* background-position: 50% 50%; */
            /*水平居右,垂直居中*/
            /* background-position: 100% 50%; */
            /* background-position: right center; */
            /*使用具体的数值定义*/
            /* background-position: 120px 120px; */
            /*也可以使用负值*/
            /* background-position: -100px 100px; */

            /*背景尺寸*/
            /* background-image: url(load.jpg); */
            /* background-size: 50% 100%; */
            /*完全填满*/
            /* background-size: 100% 100%; */
            /*背景完全覆盖;这个是比较常用的*/
            /* background-size: cover; */
            /*图片不溢出的放在容器中，可以会漏出部分区域*/
            /* background-size: contain; */
            /*宽度固定，高度自动，这里可以保障图片不变形*/
            /* background-size: 100% auto; */
        /* } */


        /*
            多个背景
            后定义的背景置于底层
        */
        /* div{
            width: 800px;
            height: 600px;
            border: 2px solid #dddddd;
            background-image: url(0.jpg),url(load.jpg);
            background-repeat: no-repeat,no-repeat;
            background-position:top left,right bottom;
        } */

        /*可以一次定义多个背景图片*/
        /* div{
            width: 800px;
            height: 600px;
            border: 2px solid #dddddd;
            background: url(0.jpg) no-repeat left 50%,
                        url(load.jpg) no-repeat right 50% red;
            ;
        } */


        /*
            组合设定
            可以使用一条指令设置背景颜色
        */
        div{
            width: 800px;
            height: 600px;
            border: 2px solid #dddddd;
            background: red url(0.jpg) no-repeat center center scroll;
        }


        






    </style>
</head>
<body>
    <!-- <h2>houdunren.com</h2> -->
    <div></div>
</body>
</html>